<template>
  <div class="detail">
    <div class="detail_top">
      <div class="list" @click="selectList(1)">自营</div>
      <div class="list" @click="selectList(0)">贝式严选</div>
      </div> 
      <div class="goodList">
        <ul class="goodList_top">
          <li v-for="(item,index) in tabList" :key="index" style="float:left">
              <div @click="selectGoods(index)">{{item.title}}</div>
          </li>
        </ul>
        <ul class="goodsList">
              <li v-for="(item,index) in goods" :key="index" style="float:left">
              <image :src="item.ImgUrl" mode="scaleToFill" ></image> 
              <p>{{item.Name}}</p>
                <p style="font-size:30rpx;color:#6c6c6c">{{item.Means}}</p>
                <span style="color:red;margin-left:5rpx">￥{{item.CurrentPrice}}</span>/<span style="color:#6c6c6c;font-size:25rpx">{{item.LabelText}}</span>
              <button type="default" size="mini" >购买</button>
            </li>
          </ul>
      </div>  
    
  </div>
</template>

<script>

export default {

  data () {
    return {
      goodsList: [
        {
          title: "女神",
          mark: "NS",
          list: []
        },
        {
          
          title: "经典",
          mark: "KSK",
          list: []
        },
        {
          title: "伴手礼",
          mark: "JZ",
          list: []
        },
        {
          title: "乳品",
          mark: "RP",
          list: []
        }
      ],
      tabList: [],
      goods:[]

    }
  },
  mounted(){
    this.pageInit();
  },
  methods:{
    pageInit(){
      this.$apis.getListData().then(res=>{   //调用
      console.log(res);
        var res = res.Tag.cakelist;
        this.goodsList.map(item=>{
          res.map(value=>{
            if(value.SupplyNo.indexOf(item.mark) !== -1){   //筛选
              item.list.push(value);
              value.ImgUrl = this.$global.joinImgUrl(value);
            }
          })
        })
        this.selectList(1);
        this.selectGoods(0);
      })
    },
     selectList(state) {
      if (state === 1) {
        this.tabList = this.goodsList.slice(0, 3);
        this.selectGoods(0);
      } else {
        this.tabList = this.goodsList.slice(3);
        this.selectGoods(0);
      }
    },
    selectGoods(index){
      this.goods=this.tabList[index].list;
    }
  }
}
</script>

<style lang = "scss">
  .detail{
    width: 100%;
    height:100%;
  }
  .detail .detail_top{
    height: 100rpx;
    border-bottom:1px solid #6c6c6c;

    width: 100%;
    background: white;
  }
 .detail .list{
    float: left;
    text-align: center;
    width: 50%;
    line-height: 100rpx;
  }
.goodList_top{
  width: 100%;
  height:80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  }
.goodsList{
  width: 100%;
  display: flex;
  flex-wrap:wrap;
  
  li{
  width:370rpx;
  height:500rpx;
    p{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      width: 250rpx;
      margin: auto;
      font-size: 34rpx;
    }
    image{
      width: 80%;
      height:300rpx;
      margin: auto;
    }
    button{
      margin-left:5rpx;
    }
  }
}


</style>
